<template>
  <div class="demo-app">
    <el-row style="padding-top: 20px;">
      <el-col :span="9" style="margin-top: 10px;padding-left:20px">
        <el-button :loading="up" @click="lastMouth" type="primary" icon="el-icon-arrow-left">上一月</el-button>
        <el-date-picker
          @change="picker"
          style="width:200px;margin-left: 10px;"
          v-model="mouth"
          type="month"
          placeholder="选择月"
        ></el-date-picker>
        <el-button
          :loading="down"
          style="margin-left: 10px;"
          @click="nextMouth"
          type="primary"
          icon="el-icon-arrow-right el-icon--right"
        >下一月</el-button>
      </el-col>
      <el-col :span="3" style="margin-top: 10px;">
        <el-select
          :loading="includeLoad"
          loading-text="系统正在加载中..."
          @change="containPendA"
          v-model="inclu"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" style="margin-top: 10px;">
        <el-button
          style="margin-left: 10px;"
          :loading="excel"
          @click="download"
          type="success"
          icon="el-icon-top"
        >导出</el-button>
      </el-col>
      <el-col :span="10">
        <el-alert
          :closable="false"
          v-if="inclu=='contain'"
          effect="dark"
          title="温馨提示"
          type="success"
          :description="description"
        ></el-alert>
        <el-alert
          :closable="false"
          v-else-if="inclu=='noContain'"
          effect="dark"
          title="温馨提示"
          type="warning"
          :description="description"
        ></el-alert>
        <el-alert
          :closable="false"
          v-else
          effect="dark"
          title="温馨提示"
          type="info"
          :description="description"
        ></el-alert>
      </el-col>
    </el-row>
    <div style="margin-top: 20px;">
      <el-table
        ref="tableref"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
      >
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column label="姓名" width="100" align="center">
          <template slot-scope="scope">
            <font style="font-size: 15px;color: blue;">
              <b>{{scope.row.userName}}</b>
            </font>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="150" align="center">
          <template slot-scope="scope">
            <font style="font-size: 15px;color: blue;">
              <b>{{scope.row.deptName}}</b>
            </font>
          </template>
        </el-table-column>
        <el-table-column label="总工作量(天)" width="100" align="center">
          <template slot-scope="scope">
            <font
              :style="scope.row.sum < sum?'font-size: 15;color: red;':'font-size: 15;color: green;'"
            >
              <b>{{scope.row.sum}}</b>
            </font>
          </template>
        </el-table-column>
        <template v-for="key in dataList">
          <el-table-column
            :key="key"
            :label="key"
            :prop="key"
            align="center"
            width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <slot
                v-if="key.slot"
                :name="scope.column.property"
                :row="scope.row"
                :$index="scope.$index"
              />
              <span v-else>
                <font
                  :style="scope.row[scope.column.property] < 7.5?'font-size: 15;color: red;':'font-size: 15;color: blue;'"
                >{{scope.row[scope.column.property]}}</font>
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <br />
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import _ from "lodash";
import { export_json_to_excel } from "@/utils/Export2Excel";
export default {
  components: {},
  created: function () {
    this.getData(this.now, this.inclu);
  },
  data: function () {
    return {
      dataList: [],
      //选择的月份
      mouth: null,
      //当前时间,作为分月的条件
      now: new Date(),
      sum: 0,
      //表格数据
      tableData: [{}],
      //按钮状态
      up: null,
      down: null,
      loading: null,
      excel: null,
      //显示字体
      inclu: "contain",
      options: [
        {
          value: "contain",
          label: "所有的工作量",
        },
        {
          value: "noContain",
          label: "已审批的工作量",
        },
        {
          value: "only",
          label: "未审批的工作量",
        },
      ],
      description: null,
    };
  },
  methods: {
    descriptions() {
      var now = formatter.formatDate(this.now, "yyyy-MM-23");
      var clone = _.clone(this.now);
      clone.setMonth(clone.getMonth() - 1);
      let now2 = formatter.formatDate(clone, "yyyy-MM-24");
      var des = "当前表格指从" + now2 + "至" + now + "的工作日里,";
      if (this.inclu == "contain") {
        des = des + "已审批和未审批的工作量数据。";
      } else if (this.inclu == "noContain") {
        des = des + "已审批的工作量数据。";
      } else {
        des = des + "未审批的工作量数据。";
      }
      this.description = des;
    },
    picker(value) {
      if (value != null) {
        //是否需要重置select数据(若需要请放开)
        // this.inclu = this.$options.data().inclu;
        this.now = value;
        this.getData(value, this.inclu);
      }
    },
    //根据当前时间获取上下周的信息
    getData(now, status) {
      this.bfalse();
      this.descriptions();
      //格式化
      now = formatter.formatDate(now, "yyyy-MM");
      this.mouth = now;
      request({
        url: "/eip/projectWorkload/attendanceCheck",
        method: "get",
        params: { time: now, status: status },
      })
        .then((r) => {
          if (r.success) {
            this.sum = Object.keys(r.parameters.list[0]).length - 3;
            this.dataList = r.data;
            this.tableData = r.parameters.list;
            this.btrue();
          } else {
            this.up = false;
            this.down = false;
            this.includeLoad = false;
            this.sum = 0;
            this.tableData = [{}];
            this.$message(r.message);
          }
          //解决fixed导致的布局错乱
          // this.$nextTick(() => {
          //   this.$refs.tableref.doLayout();
          // });
        })
        .catch((e) => {
          this.msgError(e || "数据请求失败");
        });
    },
    lastMouth() {
      //是否需要重置select数据(若需要请放开)
      // this.inclu = this.$options.data().inclu;
      let time = this.now;
      let dateTime = time.setMonth(time.getMonth() - 1);
      this.now = new Date(dateTime);
      this.getData(this.now, this.inclu);
    },
    nextMouth() {
      //是否需要重置select数据(若需要请放开)
      // this.inclu = this.$options.data().inclu;
      let time = this.now;
      let dateTime = time.setMonth(time.getMonth() + 1);
      this.now = new Date(dateTime);
      this.getData(this.now, this.inclu);
    },
    //`方法：数据导出`
    download() {
      this.exportExcel();
    },
    //导出的方法
    exportExcel() {
      require.ensure([], () => {
        const row = Object.keys(this.tableData[0]).sort().slice(0, -2);
        const rowc = [].concat(row);
        row.unshift("序号", "姓名", "部门", "总工作量(天)");
        rowc.unshift("index", "userName", "deptName", "sum");
        const tHeader = row;
        // 上面设置Excel的表格第一行的标题
        const filterVal = rowc;
        // // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData; //把data里的tableData存到list
        for (let i = 0; i < list.length; i++) {
          list[i]["index"] = i + 1;
        }
        const data = this.formatJson(filterVal, list);
        if (this.inclu == "contain") {
          export_json_to_excel(tHeader, data, "考勤工作量(所有)");
        }
        if (this.inclu == "noContain") {
          export_json_to_excel(tHeader, data, "考勤工作量(已审批)");
        }
        if (this.inclu == "only") {
          export_json_to_excel(tHeader, data, "考勤工作量(未审批)");
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    containPendA(val) {
      this.getData(this.now, this.inclu);
    },
    btrue() {
      this.loading = false;
      this.up = false;
      this.down = false;
      this.excel = false;
      this.includeLoad = false;
    },
    bfalse() {
      this.loading = true;
      this.up = true;
      this.down = true;
      this.excel = true;
      this.includeLoad = true;
    },
  },
};
</script>

<style lang='css' scoped>
</style>
